import { Cascader, Select, message, Button } from 'antd';
import { DownOutlined, CheckOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react'
import { get, post } from '../../axios/index'
import './slidSeting.less'

const { Option } = Select;

function SlidSeting(props){
    const [ options, setOptions] = useState([])
    const [ menuData, setMenuData] = useState([])
    const [ formData, setFormData] = useState({})
    
    function displayRender(label) {
        return label[label.length - 1];
    }
    //获取设备列表
    function getList() {
        get('/ck_electrical/api/listTemperatureSettings').then(res => {
            if(res.data.status === '200'){
                setMenuData(res.data.data)
            }
        })
    }
    //获取测温可选列表
    function getTemperatureList() {
        get('/ck_electrical/api/listWarningTemperatureLine').then(res => {
            if(res.data.status === '200'){
                let temp = res.data.data.map(item => {
                    item.label = `${item.min}-${item.max}`
                    item.children = []
                    for(let i = item.min - 0; i < item.max - 0 + 1; i++){
                        item.children.push({
                            label: `${i}`
                        })
                    }
                    return item
                })
                setOptions(temp)
            }
        })
    }
    function save() {
        if(!formData || !formData.temperature || !formData.facilityIds || formData.facilityIds.length === 0) {
            return
        }
        post('/ck_electrical/api/batchSetFacilityWarningTemperature', formData).then(res => {
            if(res.data.status === '200'){
                message.success(res.data.message)
                getList()
                getTemperatureList()
            }else{
                message.error(res.data.message)
            }
        }).catch(error => console.error(error))
    }

    useEffect(() => {
        if(props.show) {
            getList()
            //获取测温可选列表
            getTemperatureList()
        }
    }, [props.show])

    const fieldNames ={
        label: 'label',
        value: 'label',
        children: 'children'
    }

    return <div className={props.show ? 'slid-seting visible' : 'slid-seting hidden'}>
        <p className="title">参数设置</p>
        <div className='row-item'>
        <span className='text'>重点跟踪对象</span>
            <Select
                mode="multiple"
                allowClear
                style={{ flexGrow: 1 }}
                placeholder="请选择"
                onChange={val => setFormData({...formData, facilityIds: val})}
                >
                {menuData.map(item => <Option key={item.facilityId}>{item.serialNumber}</Option>)}
            </Select>
        </div>
        <div className='row-item'>
            <span className='text'>设置报警温度</span>
            <Cascader
                style={{ flexGrow: 1 }}
                allowClear={false}
                fieldNames={fieldNames}
                placeholder='请选择'
                options={options}
                displayRender={displayRender}
                expandTrigger="hover"
                onChange={val => setFormData({...formData, temperature: val.length === 1 ? Number(val[0]) : val.length === 2 ? Number(val[1]) : null})}
            />
        </div>
        <div className='btn-item'>
            <Button type="primary" size="large" onClick={save}>确定</Button>
        </div>
    </div>
}

export default SlidSeting